// 导入axios和相关类型
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './types'
import { ElLoading } from 'element-plus'
// element-plus为我们提供了loading组件的类型,我们只需要导入即可直接为loading变量进行一个注解
import { ILoadingInstance } from 'element-plus'

const DEFAULT_LOADING = true

class HYRequest {
  // instance是axios实例，它的类型在axios内部已经通过.d.ts文件实现，我们无需自定义它的类型
  instance: AxiosInstance
  // interceptors是实例的拦截器部分
  interceptors?: HYRequestInterceptors
  // 保存我们的loading变量,用于响应式关闭loading效果
  loadingInstance?: ILoadingInstance
  // 保存我们是否显示loading的配置
  showLoading: boolean
  // config的类型也是axios内部实现的，它就是AxiosRequestConfig
  constructor(config: HYRequestConfig) {
    // 通过axios.create并传入config配置项可创建一个axios实例
    // 并赋值给当前类的成员instance以便后续使用
    // 当我们每次new一个HYRequest，都会创建一个全新的axios实例
    // 保存我们的信息
    this.instance = axios.create(config)
    this.interceptors = config.interceptors
    this.showLoading = config.showLoading ?? DEFAULT_LOADING

    // 使用拦截器
    // 1.判断用户是否传入拦截器配置,如果传入,那么应用用户的拦截器
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )

    // 添加所有实例都有的拦截器:
    // 注意:拦截器是可以有多个的,于是上面第1的从config配置中获取的拦截器方法可以和当前以下的全局拦截器共存
    // 所有实例的请求拦截器
    this.instance.interceptors.request.use(
      (config) => {
        // 所有实例请求时都显示Loading效果
        if (this.showLoading) {
          this.loadingInstance = ElLoading.service({
            lock: true,
            text: 'Loading...',
            background: '#95a5a670'
          })
        }
        // console.log('所有实例:请求拦截器触发')
        return config
      },
      (err) => {
        return err
      }
    )
    // 所有实例的响应拦截器
    this.instance.interceptors.response.use(
      (res) => {
        // 在我们响应成功或失败时停止loading动画
        this.loadingInstance?.close()
        // console.log('所有实例:响应拦截器触发')
        // 模拟响应时判断数据是否正常返回
        const data = res.data
        if (data.returnCode === '-1001') {
          console.log('请求失败了,错误信息')
        } else {
          // 没有出错才会返回正常数据
          return data
        }
      },
      (err) => {
        this.loadingInstance?.close()
        // 模拟返回失败时,判断为哪种失败状态码,对不同状态码做不同的错误提示等操作
        if (err.response.status === '404') {
          console.log('处理404错误提示')
        }
        return err
      }
    )
  }
  // 封装一个方法，该方法调用自身类实例的request请求，并返回一个成功或失败的promise
  request<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      // 因为我们的config是自己封装的HYRequestConfig,所以我们允许传递过来拦截器
      // 然后我们可以为我们的请求单独封装拦截器,如果用户传递了拦截器的话.
      if (config.interceptors?.requestInterceptor) {
        config = config.interceptors.requestInterceptor(config)
      }

      // 判断我们的showLoading是否为false,如果是false,就代表我们不需要loading动画,则把showLoading设置为false,否则true
      if (config.showLoading === false) {
        this.showLoading = config.showLoading
      }

      this.instance.request<any, T>(config).then(
        (res) => {
          // 在这里我们判断用户是否传入响应拦截,如果传入则执行响应拦截操作然后再重新返回处理后的res
          if (config.interceptors?.responseInterceptor) {
            res = config.interceptors.responseInterceptor(res)
          }
          // 将处理后的结果resolve出
          resolve(res)
          // 将showLoading设置为true,这样不会影响下一个请求
          this.showLoading = DEFAULT_LOADING
        },
        (err) => {
          // console.log(err)
          // 将showLoading设置为true,这样不会影响下一个请求
          this.showLoading = DEFAULT_LOADING
          // 错误时返回错误信息
          reject(err)
          return err
        }
      )
    })
  }
  // 基于request封装get请求
  get<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'GET' })
  }
  // 基于request封装的post请求
  post<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'POST' })
  }
  // 基于request封装的put请求
  put<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'PUT' })
  }
  // 基于request封装的delete请求
  delete<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'DELETE' })
  }
  // 基于request封装的patch请求
  patch<T = any>(config: HYRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'PATCH' })
  }
}

export default HYRequest
